<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@include file="/WEB-INF/views/common/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <meta charset=utf-8 />
    <title>3D导览</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
        #webgl{
            background: #ccc;
            width: 800px;
            height: 600px;
        }
    </style>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <link rel="shortcut icon" href="favicon.ico">

    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,300' rel='stylesheet' type='text/css'>

    <!-- Animate.css -->
    <link rel="stylesheet" href="${ctx}/css/mainpage/animate.css">
    <!-- Icomoon Icon Fonts-->
    <link rel="stylesheet" href="${ctx}/css/mainpage/icomoon.css">
    <!-- Bootstrap  -->
    <link rel="stylesheet" href="${ctx}/css/mainpage/bootstrap.css">
    <!-- Superfish -->
    <link rel="stylesheet" href="${ctx}/css/mainpage/superfish.css">

    <link rel="stylesheet" href="${ctx}/css/mainpage/style.css">


    <!-- Modernizr JS -->
    <script src="${ctx}/js/mainpage/modernizr-2.6.2.min.js"></script>
    <!-- FOR IE9 below -->
    <!--[if lt IE 9]>
    <script src="${ctx}/js/mainpage/respond.min.js"></script>
    <![endif]-->
    <script src="${ctx}/js/threejs/build/three.js" type="text/javascript"></script>
    <script src="${ctx}/js/FirstPersonControls.js" type="text/javascript"></script>
    <script src="${ctx}/js/OrbitControls.js" type="text/javascript"></script>
    <script src="${ctx}/js/stats.min.js"></script>
    <script src="${ctx}/js/threejs/build/three.js" type="text/javascript"></script>
    <script src="${ctx}/js/threejs/src/loaders/ObjectLoader.js"></script>
    <script src="${ctx}/js/threejs/src/loaders/OBJLoader.js"></script>
    <script src="${ctx}/js/threejs/src/loaders/MTLLoader.js"></script>
    <script type="text/javascript">
        var renderer;//声明一个全局变量
        var stats;
        /*
         *构建基本画布 渲染器
         */
        function initThree() {
            width = document.getElementById('webgl').clientWidth;
            height = document.getElementById('webgl').clientHeight;
            renderer = new THREE.WebGLRenderer({antialias:true});//生成渲染器对象，属性：锯齿效果设为true
            renderer.setSize(width,height);//设置渲染器的宽和高，和画布大小一致
            document.getElementById('webgl').appendChild(renderer.domElement);//追加canvas元素到webgl元素当中
            renderer.setClearColor(0xFFFFFF,1.0);//设置渲染器的清除色
            stats = new Stats();
            //document.getElementById('webgl').appendChild( stats.dom );
        }
        /*
         *设置相机
         */
        var camera;
        function initCamera() {
            camera = new THREE.PerspectiveCamera(45,width/height,1,10000);
            //此处为设置透视投影的相机，默认情况下，相机的上方向为Y轴，右方向为X轴，沿着Z轴垂直朝里（视野角：fov； 纵横比：aspect； 相机离视最近的距离：near； 相机离视体积最远距离：far）
            camera.position.x = 1000;//设置相机的位置坐标
            camera.position.y = 0;
            camera.position.z = 0;
            //设置相机的上为y轴方向
            camera.up.x = 0;
            camera.up.y = 1;
            camera.up.z = 0;

        }

        var camControls;
        function initCameraControl() {
            camControls = new THREE.FirstPersonControls(camera);
            camControls.lookSpeed = 0.1;
            camControls.movementSpeed = 1000;
            camControls.noFly = true;
            camControls.lookVertical = true;
            camControls.constrainVertical = true;
            camControls.verticalMin = 1.0;
            camControls.verticalMax = 2.0;

//            camControls = new THREE.OrbitControls( camera, renderer.domElement );
//            camControls.maxPolarAngle = Math.PI * 0.5;
//            camControls.minDistance = 1000;
//            camControls.maxDistance = 7500;
        }

        var clock = new THREE.Clock();
        function render() {
            camControls.update( clock.getDelta() );
            renderer.render( scene, camera );
        }
        /*
         *设置场景，所有的元素只有在添加到场景当中之后才能够生效
         */
        var scene;
        function initScene() {
            scene = new THREE.Scene();
        }
        /*
         *设置光源
         */
        var light, light2;
        function initLight() {
            var ambientlight = new THREE.AmbientLight( 0x404040); // soft white light
            scene.add( ambientlight );

            var light3 = new THREE.PointLight( 0xff0000, 1, 100 );
            light3.position.set( 50, 5000, 50 );
            scene.add( light3 );

            light = new THREE.DirectionalLight(0xffeedd,1.0,0);//设置平行光DirectionalLight
            light.position.set(50,50,5000);//光源向量，即光源的位置
            scene.add(light);//追加光源到场景

            light2 = new THREE.DirectionalLight(0xffeedd,0.1,0);//设置平行光DirectionalLight
            light2.position.set(50,5000,50);//光源向量，即光源的位置
            scene.add(light2);//追加光源到场景
        }

        /*
         *设置物体
         */
        function initObject() {
            var manager = new THREE.LoadingManager();
            manager.onProgress = function ( item, loaded, total ) {

                console.log( item, loaded, total );

            };
            var texture = new THREE.Texture();

            var onProgress = function ( xhr ) {
                if ( xhr.lengthComputable ) {
                    var percentComplete = xhr.loaded / xhr.total * 100;
                    console.log( Math.round(percentComplete, 2) + '% downloaded' );
                }
            };

            var onError = function ( xhr ) {
            };

            var mtlLoader = new THREE.MTLLoader();
            mtlLoader.load( '${ctx}/object/3d_model.mtl', function( materials ) {
                materials.preload();
                var loader = new THREE.OBJLoader(manager);
                loader.setMaterials(materials);
                loader.load('${ctx}/object/3d_model.obj', function (object) {

                    object.position.y = -95;
                    scene.add(object);

                }, onProgress, onError);
            });
        }


        function animate() {
            requestAnimationFrame( animate );
            render();
            stats.update();
        }

        /*
         *执行
         */
        function threeStart() {
            initThree();
            initCamera();
            initCameraControl();
            initScene();
            initLight();
            initObject();
            renderer.clear();
            renderer.render(scene,camera);
            animate();
        }
        /*
         *如果想让立体图形进行循环运动，需要使用到loop
         *首先创建渲染器、相机、场景、光源、物体以及最后的执行
         *只需要添加loop函数
         var t=0;
         function loop(){
         t++;
         cube.rotation.set(t/100,0,0);
         renderer.clear();
         renderer.render(scene,camera);
         window.requestAnimationFrame(loop);
         }
         */
    </script>
</head>
<body onload="threeStart();">
<div id="fh5co-wrapper">
    <div id="fh5co-page">
        <div id="fh5co-header">
            <div class="top">
                <div class="container">
                    <span> <a href="#"><i>@</i> 关注Santiago新浪微博</a></span>
                    <span> <a href="tel://+4008517517"><i class="icon-mobile3"></i> 4008 517 517</a></span>
                </div>
            </div>
            <!-- end:top -->
            <header id="fh5co-header-section">
                <div class="container">
                    <div class="nav-header">
                        <a href="#" class="js-fh5co-nav-toggle fh5co-nav-toggle"><i></i></a>
                        <h1 id="fh5co-logo"><a href="${ctx}/user/AfteruserLogin">圣地亚哥宠物医院</a></h1>
                        <!-- START #fh5co-menu-wrap -->
                        <nav id="fh5co-menu-wrap" role="navigation">
                            <ul class="sf-menu" id="fh5co-primary-menu">
                                <li>
                                    <a href="${ctx}/user/AfteruserLogin">Home</a>
                                </li>
                                <li class="active">
                                    <a href="${ctx}/guide/pre3DGuide" class="fh5co-sub-down">3D导览</a>
                                    <ul class="fh5co-sub-menu">
                                        <li><a href="${ctx}/guide/pre3DGuide">3D模型导览</a></li>
                                        <li><a href="${ctx}/guide/preimageGuide">图片导览</a></li>
                                    </ul>
                                </li>
                                <li>
                                    <a href="${ctx}/cosplay/preViewCosplay" class="fh5co-sub-down">职能学习</a>
                                    <ul class="fh5co-sub-menu">
                                        <li><a href="${ctx}/cosplay/preViewCosplay">角色扮演</a></li>
                                        <li><a href="${ctx}/office/preViewOffice">科室详情</a></li>
                                        <li><a href="${ctx}/case/preViewCase">病例学习</a></li>
                                    </ul>
                                </li>
                                <li><a href="${ctx}/user/userLogOut">退出</a></li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </header>

        </div>


        <div class="fh5co-hero">
            <div class="fh5co-overlay"></div>
                <div class="fh5co-cover text-center" style="background-image: url(${ctx}/images/mainpage/main.jpg);">
                    <div class="desc animate-box">
                        <h2>欢迎来到宠物医院<br />3D导览界面</h2>
                        <span>圣地亚哥宠物医院荣誉出品</span>
                    </div>
            </div>
        </div>


        <div id="fh5co-content-section">
            <div class="container">
                <div class="row">
                    <div class="col-md-3">
                        <div class="fh5co-testimonial text-center animate-box">
                            <h2>操作说明</h2>
                            <blockquote>
                                <p>W,S与鼠标左键右键功能相同进行模型远近缩放<br/>
                                    <br/>
                                    A,D进行左右平移<br/>
                                    <br/>
                                鼠标距离图形框中心远近决定镜头左右旋转速度</p>
                            </blockquote>
                        </div>
                    </div>
                    <div class="col-md-7">
                        <div class="fh5co-about-us text-center animate-box">
                            <div class="desc animate-box">
                                <div id="webgl"  style="margin-left: auto"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- fh5co-blog-section -->
        <footer>
            <div id="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-md-6">
                            <p>Copyright C1G19 Santiago Pet Hospital.All RIGHTS RESERVED. <br>Any Question Please contact 4008-517-517</p>
                        </div>
                        <div class="col-md-6">
                            <ul class="footer-menu">
                                <li><a href="${ctx}/user/AfteruserLogin">Home</a></li>
                                <li><a href="${ctx}/guide/pre3DGuide">3D导览</a></li>
                                <li><a href="${ctx}/cosplay/preViewCosplay">职能学习</a></li>
                                <li><a href="${ctx}/user/userLogOut">退出</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </footer>

    </div>
    <!-- END fh5co-page -->

</div>
<!-- END fh5co-wrapper -->

<!-- jQuery -->


<script src="${ctx}/js/mainpage/jquery.min.js"></script>
<!-- jQuery Easing -->
<script src="${ctx}/js/mainpage/jquery.easing.1.3.js"></script>
<!-- Bootstrap -->
<script src="${ctx}/js/mainpage/bootstrap.min.js"></script>
<!-- Waypoints -->
<script src="${ctx}/js/mainpage/jquery.waypoints.min.js"></script>
<!-- Superfish -->
<script src="${ctx}/js/mainpage/hoverIntent.js"></script>
<script src="${ctx}/js/mainpage/superfish.js"></script>

<!-- Main JS (Do not remove) -->
<script src="${ctx}/js/mainpage/main.js"></script>

</body>
</html>